<template>
    <div class="box">
        <div class="container">
            <div class="swiper-box">
                <!--            轮播-->
                <Swiper :options="swiperOptions">
                    <Swiper-slide :key="item.id" v-for="item in slideList">
                        <img :src="item.img" alt="">
                    </Swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
                    <div class="swiper-button-next" slot="button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
                </Swiper>
<!--                导航栏-->
                <div class="site-category">
                    <ul class="nav-list">
                        <li class="category-item">
                            <router-link class="title" to="/">手机 电话卡 <em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">电视 盒子<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">笔记本 显示器 平板<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">家电 插线板<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">出行 穿戴<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">智能 路由器<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">电源 配件<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">健康 儿童<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img ||require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">耳机 音箱<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img || require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item">
                            <router-link class="title" to="/">生活 箱包<em class="iconfont-arrow-right-big"></em>
                            </router-link>
                            <div class="children">
                                <ul :key="index" v-for="(item_box,index) in menuList">
                                    <li :key="item.id" v-for="item in item_box">
                                        <router-link to="/">
                                            <img class="thumb"
                                                 :src="item.img ||require('../../public/imgs/item-box-1.png')" alt="">
                                            <span class="text">{{item.name || '小米9 CC'}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
<!--                广告-->
                <div class="home-hero-sub clearfix">
                    <div class="span4">
                        <ul class="home-channel-list clearfix">
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                                         alt="">
                                    <div>小米秒杀</div>
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"
                                         alt="">
                                    <div>企业团购</div>
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                                         alt="">
                                    <div>F码通道</div>
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"
                                         alt="">
                                    <div>米粉卡</div>
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"
                                         alt="">
                                    <div>以旧换新</div>
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"
                                         alt="">
                                    <div>话费充值</div>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="span16">
                        <ul class="home-promo-list clearfix">
                            <li class="first">
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d158f243b54d5ec68dd2ac72bd24555d.jpg?w=632&h=340" alt="">
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fbff319c7dd00e75c9758acf248d3784.jpg?w=632&h=340" alt="">
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340" alt="">
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-main">
            <div class="container">
                <div class="home-flashsale">
                    <div class="box-hd clearfix">
                        <h2 class="title">小米闪购</h2>
                    </div>
                    <div class="box-bd clearfix">
                        <div class="row">
                            <div class="span4 rainbow-item-4 flashsale-countdown">
                                <div class="round">14:00场</div>
                                <img src="../../public/imgs/shangou.png" alt="">
                                <div class="desc">距离结束还有</div>
                                <div class="countdown clearfix">
                                    <span>02</span>
                                    <i>:</i>
                                    <span>58</span>
                                    <i>:</i>
                                    <span>00</span>
                                </div>
                            </div>
                            <div class="span16">
                                <swiper ref="mySwiper" :options="FlashSale">
                                    <swiper-slide>
                                        <product :index="index" :key="item.id" :data="item" v-for="(item,index) in FlashSaleList"></product>
                                    </swiper-slide>
                                    <swiper-slide>Slide 2</swiper-slide>
                                </swiper>
                            </div>
                            <div class="swiper-controls">
                                <div class="swiper-flashsale-prev"></div>
                                <div class="swiper-flashsale-next"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <service-bar></service-bar>
    </div>
</template>

<script>

    import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'

    export default {
        name: "index",
        components: {
            Swiper,
            SwiperSlide,
            product:()=>import('../components/product'),
            'service-bar': () => import('../components/ServiceBar')
        },
        data() {
            return {
                FlashSaleList:[
                    {
                        title:"米兔折叠婴儿推车 蓝色",
                        img:"//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1541382633.6797803.png?thumb=1&w=200&h=200",
                        desc:'出发去向往的地方',
                        price:629,
                        unPrice:700,
                        id:0
                    }
                ],
                slideList: [
                    {
                        id: "42",
                        img: require('../../public/imgs/slider/slide-1.jpg')
                    }, {
                        id: "45",
                        img: require('../../public/imgs/slider/slide-2.jpg')
                    }, {
                        id: "46",
                        img: require('../../public/imgs/slider/slide-3.jpg')
                    }, {
                        id: "50",
                        img: require('../../public/imgs/slider/slide-4.jpg')
                    }, {
                        id: "49",
                        img: require('../../public/imgs/slider/slide-5.jpg')
                    }
                ],
                //轮播配置
                swiperOptions: {
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    autoplay: true,
                    effect: 'cube',
                    loop: true
                },
                menuList: [
                    [
                        {
                            id: 30,
                            img: require('../../public/imgs/item-box-1.png'),
                            name: "小米CC9"
                        },
                        {
                            id: 31,
                            img: require('../../public/imgs/item-box-2.png'),
                            name: "小米8青春版"
                        },
                        {
                            id: 32,
                            img: require('../../public/imgs/item-box-3.jpg'),
                            name: "小米8青春版"
                        },
                        {
                            id: 33,
                            img: require('../../public/imgs/item-box-4.jpg'),
                            name: "小米8青春版"
                        },
                        {
                            id: 34,
                            img: require('../../public/imgs/item-box-4.jpg'),
                            name: "小米8青春版"
                        },
                        {
                            id: 35,
                            img: require('../../public/imgs/item-box-4.jpg'),
                            name: "小米8青春版"
                        }
                    ],
                    [1, 1, 1, 1, 1, 1],
                    [1, 1, 1,],
                    [1, 1, 1, 1]
                ],
                //闪购轮播配置
                FlashSale:{
                    autoplay:false,
                    delay:3000,
                    loop: true,

                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../../resource/scss/config";

    .container {
        .swiper-box {
            position: relative;
            width: $min-width;
            margin: 0 auto 26px;

            .swiper-container {
                width: 100%;
                height: 460px;

                img {
                    width: 100%;
                }
            }

            .swiper-button-next,
            .swiper-button-prev {
                color: rgba(0, 0, 0, .25);
                padding: 10px 4px;
                transition: all .1s;

                &:hover {
                    color: #fff;
                    background-color: rgba(0, 0, 0, .25);
                }
            }

            .swiper-button-next {
                right: 0;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }

            .swiper-button-prev {
                left: 234px;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }

            /*    site-category*/
            .site-category {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 11;
                height: 460px;

                .nav-list {
                    box-sizing: border-box;
                    width: 234px;
                    height: 100%;
                    padding: 20px 0;
                    background: rgba(105, 101, 101, .6);

                    .category-item {
                        width: 100%;
                        box-sizing: border-box;
                        line-height: 42px;
                        padding-left: 30px;
                        cursor: pointer;
                        transition: all .1s;

                        &:hover {
                            background-color: $colorA;
                        }

                        &:hover .children {
                            display: block;
                        }

                        a {
                            display: block;
                            position: relative;
                            color: #fff;
                            font-size: 14px;

                            em {
                                position: absolute;
                                right: 20px;
                                top: 0;
                            }
                        }

                        .children {
                            display: none;
                            position: absolute;
                            left: 234px;
                            top: 0;
                            height: 100%;
                            width: 992px;

                            ul {
                                box-sizing: border-box;
                                width: 248px;
                                height: 100%;
                                float: left;
                                background-color: #fff;

                                li {
                                    height: 76px;
                                    line-height: 76px;
                                    padding: 0 20px;
                                    width: 265px;
                                }

                                img {
                                    display: inline-block;
                                    vertical-align: middle;
                                    width: 40px;
                                    height: 40px;
                                    margin-right: 12px;
                                }

                                .text {
                                    display: inline-block;
                                    vertical-align: middle;
                                    color: #333;
                                    width: 172px;
                                    line-height: 40px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
            }

            .home-hero-sub {

                margin-top: 14px;
                .span4,
                .span16 {
                    float: left;
                }

                .span4 {
                    width: 234px;
                }

                .span16 {
                    width: 978px;
                    margin-left: 14px;
                }

                .home-channel-list {
                    overflow: hidden;
                    margin: 0;
                    padding: 3px;
                    font-size: 12px;
                    text-align: center;
                    background: #5f5750;

                    li {
                        position: relative;
                        float: left;
                        width: 70px;
                        height: 82px;
                        padding: 0 3px;
                        &:after,
                        &:before{
                            position: absolute;
                            background-color: #665e57;
                        }
                        &:before{
                            content: ' ';
                            left: 0;
                            top: 6px;
                            width: 1px;
                            height: 70px;
                        }
                        &:after{
                            content: ' ';
                            top: -1px;
                            left: 6px;
                            width: 64px;
                            height: 1px;
                        }
                        a{
                            display: block;
                            color: #fff;
                            opacity: .7;
                            padding-top: 18px;
                            transition: all .3s;
                            &:hover{
                                opacity: 1;
                            }
                        }
                        img {
                            display: block;
                            width: 24px;
                            height: 24px;
                            margin: 0 auto 4px;
                        }
                    }
                }
                .home-promo-list{
                    li{
                        &.first{
                            margin-left: 0;
                        }
                        &:hover{
                            z-index: 2;
                            box-shadow: 0 15px 30px rgba(0,0,0,.1);
                        }
                        float: left;
                        width: 316px;
                        height: 170px;
                        transition: box-shadow .2s linear;
                        margin-left: 15px;
                        img{
                            display: block;
                            width: 316px;
                            height: 170px;
                        }
                    }
                }
            }
        }
    }
    .page-main{
        background-color: #f5f5f5;
        width: 100%;
        .row{
            margin-left: -14px;
        }
        .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span13, .span14, .span15, .span16, .span17, .span18, .span19, .span20{
            float: left;
            margin-left: 14px;
            min-height: 1px;
        }
        .span4{
            width: 234px;
        }
        .span16{
            width: 978px;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        /*    闪购*/
            .home-flashsale{
                margin-bottom: 22px;
                .flashsale-countdown{
                    height: 300px;
                    padding-top: 39px;
                    border-top-width: 1px;
                    border-top-style: solid;
                    background-color: #f1eded;
                    text-align: center;
                    .round{
                        font-size: 21px;
                        color: #ef3a3b;
                        padding-top: 15px;
                    }
                    img{
                        margin: 25px auto;
                    }
                    .desc{
                        color: rgba(0,0,0,.54);
                        font-size: 15px;
                    }
                    .countdown{
                        width: 168px;
                        margin: 28px auto 0;
                        span{
                            width: 46px;
                            height: 46px;
                            background: #605751;
                            color: #fff;
                            font-size: 24px;
                            line-height: 46px;
                            float: left;
                        }
                        i{
                            width: 15px;
                            float: left;
                            height: 46px;
                            line-height: 46px;
                            color: #605751;
                            font-size: 28px;
                            font-style: normal;
                        }
                    }

                }
            }
        }
    }
</style>